<template>
  <VPage>
    <el-tabs class="w-full h-full info px-2" v-model="activeType">
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="(item, index) in tabList"
        :key="index"
      >
        <component :is="item.component" v-if="loads[item.name]" />
      </el-tab-pane>
    </el-tabs>
  </VPage>
</template>
<script setup name="StatementDesign-performance" lang="jsx">
import { reactive, toRefs } from "vue";
import performance from "./components/performance";
import score from "./components/score";

const tabList = [
  {
    label: "设计人效统计",
    name: "performance",
    component: performance,
  },
  {
    label: "设计评分管理",
    name: "score",
    component: score,
  },
];

const data = reactive({
  activeType: "performance",
});
const { activeType } = toRefs(data);

const loads = reactive({ performance: true });

watch(
  () => activeType.value,
  (val) => {
    if (loads[val]) return;
    loads[val] = true;
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss">
.info {
  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__content {
    height: calc(100% - 40px);
    padding: 0;
  }

  .el-tab-pane {
    height: 100%;
  }
}
</style>
